<template>
  <a-modal
    :maskClosable="maskClosable"
    title="应用资源详情"
    :width="600"
    :visible="visible"
    :confirm-loading="confirmLoading"
    :okButtonProps="{ class: { 'jee-hidden': true } }"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <a-form
        :labelCol="{ span: 8 }"
        :wrapperCol="{ span: 14 }"
        :form="form"
      >
        <a-form-item label="应用名称">
          <span class="ant-form-text"> {{ model.name }} </span>
        </a-form-item>

        <a-form-item label="应用类型">
          <span class="ant-form-text"> {{ model.typeName }} </span>
        </a-form-item>

        <a-form-item label="云平台资源">
          <span class="ant-form-text"> {{ model.cloudResourceName }} </span>
        </a-form-item>

        <a-form-item label="创建时间">
          <span class="ant-form-text"> {{ model.createTime }} </span>
        </a-form-item>
      </a-form>

      <div class="instance-list">
        <p>实例列表</p>

        <a-table
          ref="table"
          rowKey="instanceId"
          size="middle"
          :columns="columns"
          :pagination="false"
          :dataSource="gDataSource"
        >
          <span
            slot="sortCol"
            slot-scope="text, record, index"
          >
            {{
          (gPagination.current - 1) * gPagination.pageSize + parseInt(index) + 1
        }}
      </span>
        </a-table>
      </div>
    </a-spin>
  </a-modal>
</template>
<script>
  import { GwListMixin } from "@/mixins/GwListMixin";
  import { gPostAction } from "@/api/manage";

  export default {
    name: "DetailAppModal",
    mixins: [GwListMixin],
    data() {
      return {
        visible: false,
        confirmLoading: false,
        form: this.$form.createForm(this),
        model: {},
        maskClosable: false,
        columns: [
        {
          title: "序号",
          dataIndex: "",
          key: "rowIndex",
          width: 50,
          scopedSlots: { customRender: "sortCol" },
        },
        {
          title: "实例名称",
          width: 200,
          dataIndex: "instanceName",
        },
        {
          title: "状态",
          dataIndex: "statusName",
        },
        {
          title: "云平台资源",
          dataIndex: "resourceName",
        }],
      };
    },
    methods: {
      detail(record) {
        this.model = {}
        this.gDataSource = []
        this.visible = true;
        let requestData = {
          appId: record.id,
          content: '应用资源详情'
        }
        gPostAction('/app/detail', requestData).then((res) => {
          if (res.success) {
            this.model = Object.assign({}, res.data)
            this.gDataSource = res.data.instances
          }
        })
      },
      handleCancel() {
        this.visible = false;
        this.confirmLoading = false;
      },
    },
  };
</script>

<style
  lang="less"
  scoped
>
  .instance-list {
    margin-top: 24px;

    p {
      color: rgba(0, 0, 0, 0.85);
    }
  }
</style>